<template>
	<div class="overview">
		<Row class="colBox">
			<!-- 左侧 -->
			<Col span="6" class="left">
				<!-- 顶部 -->
				<div class="top">
					<Select v-model="server" @on-change="serverShow">
						<Option v-for="item in serverList" :value="item.gId" :key="item.seq">{{ item.groupName }}</Option>
					</Select>
					<div class="server_num">
						<h1>
							{{serverTotal}}
						</h1>
						<div>
							服务器总数
						</div>
					</div>
				</div>
				<ul class="list">
					<li>
						<div class="server_num">
							<h1>
								{{serverAlive}}
							</h1>
							<div>
								运行中
							</div>
						</div>
					</li>
					<li>
						<div class="server_num">
							<h1>
								{{serverTotal - serverAlive}}
							</h1>
							<div>
								下线数量
							</div>
						</div>
					</li>
				</ul>
				<!-- 饼图 -->
				<div class="circleGroup">
					<i-circle :percent="100" class="circle1" stroke-color="#DADADB">
							<span class="demo-Circle-inner" style="font-size:24px">100%</span>
					</i-circle>
					<i-circle :percent="alivePer" class="circle2" :size="200" stroke-color="#1D8E0A" trail-color="transparent">
					</i-circle>
					<i-circle :percent="100 - alivePer" class="circle3" :size="280" stroke-color="#8DB5FF" trail-color="transparent">
					</i-circle>
				</div>
				<div class="message">
					<span class="run status">运行中</span>
					<span class="text first">{{isNaN(alivePer) ? 0 : alivePer}}%</span>
					<span class="runed  status">下线中</span>
					<span class="text">{{isNaN(100 - alivePer) ? 100 : 100 - alivePer}}%</span>
				</div>
			</Col>
			<!-- 右侧 -->
			<Col span="18" class="right">
				<Row>
					<Col span="8" class="col">
						<div class="text">CPU使用情况</div>
						<div class="center">
							<div class="h1">{{utilization}}</div>
							CPU平均使用率
						</div>
						<Progress :percent="utilization" hide-info/>
						<div class="message">
							已使用<span>{{isNaN(utilization) ? 0 : utilization}}%</span>
						</div>
					</Col>
					<Col span="8" class="col">
						<div class="text">内存使用情况（G）</div>
						<ul>
							<li class="first">
								<div class="h1">{{memTotal}}</div>
								内存总量
							</li>
							<li class="last">
								<div class="h1">{{memUsed}}</div>
								内存已使用量
							</li>
						</ul>
						<Progress :percent="memPer" hide-info/>
						<div class="message">
							已使用<span>{{isNaN(memPer) ? 0 : memPer}}%</span>
						</div>
					</Col>
					<Col span="8" class="col">
						<div class="text">硬盘使用情况(G)</div>
						<ul>
							<li class="first">
								<div class="h1">{{diskTotal}}</div>
								硬盘总量
							</li>
							<li class="last">
								<div class="h1">{{diskFree}}</div>
								硬盘已使用量
							</li>
						</ul>
						<Progress :percent="diskPer" hide-info/>
						<div class="message">
							已使用<span>{{isNaN(diskPer) ? 0 : diskPer}}%</span>
						</div>
					</Col>
				</Row>
				<div id="echarts"></div>
			</Col>
		</Row>
	</div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
		// 服务器下拉选择
		server: '',
		// 服务器列表
		serverList: [],
		// 服务器总数
		serverTotal: 0,
		// 运行服务器数量
		serverAlive: 0,
		// 服务器运行比例
		alivePer: 0,
		// 使用率
		utilization: 0,
		// 内存总量
		memTotal: 0,
		// 内存使用量
		memUsed: 0,
		// 内存使用率
		memPer: 0,
		// 硬盘总量
		diskTotal: 0,
		// 硬盘使用量
		diskFree: 0,
		// 硬盘使用率
		diskPer: 0,
		// 上传x轴
		rxListX: [],
		// 上传y轴
		rxListY: [],
		// 下载y轴
		txListY: [],
		// 单位
		unit: 'KB/s'
    }
  },
  methods: {
	// 获取服务器下拉列表
	getList () {
		this.$api.get(0, '/sys/v2/group/list', {}, data => {
			if (data.data.code === 0) {
				this.serverList = data.data.data
				this.server = data.data.data[0].gId
				this.serverShow(this.server)
			}
		})
	},
	// 下拉框选中，触发函数
	serverShow (gId) {
		this.serverTotal = 0
		this.serverAlive = 0
		this.alivePer = 0
		this.utilization = 0
		this.memTotal = 0
		this.memUsed = 0
		this.memPer = 0
		this.diskTotal = 0
		this.diskFree = 0
		this.diskPer = 0
		this.rxListX = []
		this.rxListY = []
		this.txListY = []
		this.line()
		this.$api.get(0, '/sys/v2/history/overview?gId=' + gId, {}, data => {
			if (data.data.code === 0) {
				this.serverTotal = data.data.data[0].machineTotal
				this.serverAlive = data.data.data[0].machineAlived
				this.alivePer = parseFloat(((this.serverAlive / this.serverTotal) * 100).toFixed(2))
				this.utilization = parseFloat(data.data.data[1].core)
				this.memTotal = data.data.data[2].memTotal.toFixed(2)
				this.memUsed = data.data.data[2].memUsed
				this.memPer = parseFloat(((this.memUsed / this.memTotal) * 100).toFixed(2))
				this.diskTotal = data.data.data[3].diskTotal
				this.diskFree = data.data.data[3].diskTotal - data.data.data[3].diskFree
				this.diskPer = parseFloat(((this.diskFree / this.diskTotal) * 100).toFixed(2))
				var arry = data.data.data[4].net
				var a = []
				var b = []
				var c = []
				var rMax = arry.rxList[0].value
				var tMax = arry.txList[0].value
				for (var i = 0; i < arry.rxList.length; i++) {
					a.push(arry.rxList[i].time)
					var rCurrt = arry.rxList[i].value
					if (rCurrt > rMax) {
						rMax = rCurrt
					}
					var tCurrt = arry.txList[i].value
					if (tCurrt > tMax) {
						tMax = tCurrt
					}
				}
				if (rMax > 1024) {
					for (var d = 0; d < arry.rxList.length; d++) {
						b.push(parseFloat(((arry.rxList[d].value / 1024) * 100).toFixed(2)))
						c.push(parseFloat(((arry.txList[d].value / 1024) * 100).toFixed(2)))
					}
					this.unit = 'MB/s'
				} else if (tMax > 1024) {
					for (var e = 0; e < arry.rxList.length; e++) {
						b.push(parseFloat(((arry.rxList[e].value / 1024) * 100).toFixed(2)))
						c.push(parseFloat(((arry.txList[e].value / 1024) * 100).toFixed(2)))
					}
					this.unit = 'MB/s'
				} else {
					for (var f = 0; f < arry.rxList.length; f++) {
						b.push(parseFloat(((arry.rxList[f].value / 1024) * 100).toFixed(2)))
						c.push(parseFloat(((arry.txList[f].value / 1024) * 100).toFixed(2)))
					}
				}
				this.rxListX = a
				this.rxListY = b
				this.txListY = c
				this.line()
			}
		})
	},
	// 折线图
	line () {
		var option = {
			xAxis: {
				type: 'category',
				data: this.rxListX
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					formatter: '{value} ' + this.unit
				}
			},
			tooltip: {
				trigger: 'axis'
			},
			series: [
				{
				name: '网络上传',
				data: this.rxListY,
				type: 'line'
				},
				{
					name: '网络下载',
					data: this.txListY,
					type: 'line'
				}
			]
		}
		// 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echarts'))
		// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)
	}
  },
  mounted () {
	this.getList()
  }
}
</script>
